<template>
  <div class="bigevent-page bigevent-page-4">
    <mu-appbar class="app-popup-topbar" title="">
      <mu-icon-button icon="arrow_back" @click.native="cancel()" slot="left"/>
      <mu-icon-menu icon="more_vert" slot="right">
        <mu-menu-item title="编辑" @click="$router.replace({name:'bigeventEdit',params:{id:itemData.id,data:itemData,action:'edit'}})"/>
        <mu-menu-item title="删除" @click="deleteItem()"/>
      </mu-icon-menu>
    </mu-appbar>
    <mu-flexbox class="bigevent-page-content">
       <mu-flexbox-item>
        <div class="bigevent-page-content-title">{{itemData.memorabiliaTitle}}</div>
        <div class="bigevent-page-content-time">{{itemData.occurredTime}}</div>
        <div class="bigevent-page-content-text"><em></em><span>{{itemData.memorabiliaText}}</span></div>
       </mu-flexbox-item>
    </mu-flexbox>
     <mu-dialog :open="dialog" title="警告" @close="close('dialog')">
      是否要删除该大事件？
      <mu-flat-button slot="actions" @click="close('dialog')" default label="取消"/>
      <mu-flat-button slot="actions" primary @click="comfirmDelete" label="确定"/>
    </mu-dialog>
  </div>
</template>

<script>
import {dateFormat} from 'scripts/common'
  import services from 'services'
export default {
  data () {
    return {
      itemData:{"id":'',"memorabiliaNo":'',"memorabiliaTitle":'',"memorabiliaText":'',"occurredTime":'',"status":true,"familyId":'',"createBy":'',"updateBy":'',"createTime":'',"sort":''},
      dialog:false,
    }
  },
  computed:{
  },
  components:{
  },
  mounted () {
    this.getData();
  },
  beforeRouteUpdate (to,form,next){
    this.getData();
    next()
  },
  methods: {
    getData (){
      if (this.$route.params.action=='view') {
        if(this.$route.params.data!=null){
          //设置大事件信息
          this.itemData=this.$route.params.data;
          this.itemData.status=(this.itemData.status==1?true:false);
          this.itemData.occurredTime=dateFormat(this.itemData.occurredTime,'YYYY-MM-DD');
        }
      }
      /*var vm=this
      //获取大事件信息
      services.BigEventService.getMemo({
        data:{
          id: vm.itemData.id
        },
        success:(data)=>{
          vm.itemData=data
          vm.itemData.start=dateFormat(vm.itemData.start,'YYYY年M月D日')
        }
      })*/
    },
    cancel (){
      this.$root.$router.back()
    },
     deleteItem (){
        this.dialog=true
     },
     comfirmDelete (){
      var vm=this
      this.dialog=false
      this.setLoading(true)
      //删除大事件
      services.BigEventService.deleteMemo({
        data:{
          id: vm.itemData.id
        },
        success:(data)=>{
          vm.showToast('删除成功',800,vm.cancel)
        },
        error:()=>{
          vm.showToast('删除失败')
        },
        complete:()=>{
          vm.setLoading(false)
        }
      })
     },
       open (contrl) {
        this[contrl] = true
      },
      close (contrl) {
        this[contrl] = false
      },
      dateFormat,
      setLoading (isLoading){  this.$store.dispatch('setLoading',isLoading) },
      showToast (toastText,time,callback){  this.$store.dispatch('showToast',{toastText,time,callback}) },
      hideToast (){  this.$store.dispatch('hideToast') }
  }
}
</script>

<style>
.bigevent-page{position: absolute;top: 0;bottom:-44px;left: 0;right: 0;z-index: 10;background-size: cover;background-repeat: no-repeat;background-position: center;}
/*.bigevent-page-1{background-image: url(../assets/images/bg_bigevent_birthday.jpg);}
.bigevent-page-2{background-image: url(../assets/images/bg_bigevent_family.jpg);}
.bigevent-page-3{background-image: url(../assets/images/bg_bigevent_marry.jpg);}*/
.bigevent-page-4{background-image: url(../assets/images/bg_bigevent_other.jpg);}
.bigevent-page-content{position: absolute;bottom: 0;left: 0;right: 0;top: 50%;padding-top:50px;padding-left:40px;padding-right:20px;color: #fff;font-size:16px;}
/*.bigevent-page-2 .bigevent-page-content{color: #4b4b4b}
.bigevent-page-3 .bigevent-page-content{color: #715940}*/
.bigevent-page-4 .bigevent-page-content{color: #745236}
/*.bigevent-page-content-day em{font-size:50px;vertical-align: text-top;display: inline-block;line-height:64px;font-style: normal;}
.bigevent-page-content-day span{font-size:16px; vertical-align: text-top;display: inline-block;line-height: 44px;margin-left: 5px;font-weight: bold;}*/
.bigevent-page-content-title{margin-top: 0px;font-size:20px;}
.bigevent-page-content-text{margin-top: 5px;font-size:16px;}
</style>
